<template>
	<view class="building">
		<!-- <f-navbar title="建筑物（维保）" :iconLeft="true" :isBack="true" @goBack="goBack" /> -->
		<view>
			<view class="building-content" v-if="recombinationBuildList.length > 0">
				<view class="building-content-box" v-for="(item, index) of recombinationBuildList" :key="index">
					<view v-if="item.buildLists.length > 0">
						<view class="building-content-box-title ff-margin-top-15 ff-margin-bottom-15 ff-font-12">
							{{ item.buildTitle }}
						</view>
						<view
							class="building-content-box-info ff-align-items-one ff-flex-between ff-margin-bottom-10 ff-border-radius-5 ff-bg-fff"
							v-for="itemList of item.buildLists" :key="itemList.buildingId">
							<view class="ff-font-15 ff-font-weight-600 ff-ellipsis-1">{{ itemList.buildingName }}</view>
							<view class="ff-flex">
								<view @click="editBuildClick(itemList)"
									class="ff-color-blue ff-font-14 ff-margin-right-20">编辑</view>
								<view @click="fireFacilitiesClick(itemList)" class="ff-color-blue ff-font-14">消防设施
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="noData" class="ff-padding-bottom-70">
					<u-divider border-color="#909399" height="120" color="#909399" bg-color="#f5f5f5">没有更多了</u-divider>
				</view>
			</view>
			<f-noData v-else></f-noData>
		</view>
		<view class="building-but"><u-button type="primary" @click="addBuilding">新增建筑物</u-button></view>
		<!-- 组件 -->
		<u-back-top :scrollTop="scrollTop" top="200" mode="circle" :iconStyle="iconStyle"
			:customStyle="customstyle"></u-back-top>
		<u-toast ref="uToast" />
		<f-loading ref="loading" />
		<u-modal v-model="infoModal" @confirm="infoConfirm" confirm-text="我知道了" title="温馨提示"
			:content-style="{ 'line-height': '1.5' }" :content="contentModal" />
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		name: 'buildingList',
		data() {
			return {
				infoModal: false, // 弹框显/隐
				contentModal: '请按照建筑物实际消防设施数量准确填写基础数据，若不据实填写，会被预警。', // 弹框内容
				scrollTop: 0,
				iconStyle: {
					fontSize: '32rpx',
					color: '#FFFFFF'
				},
				customstyle: {
					background: '#3B83FE'
				},
				buildList: [], // 建筑列表数据
				recombinationBuildList: [], // 重组后的建筑列表数据
				params: {
					current: 1,
					size: 15
				},
				noData: false // 没有更多数据了：显/隐
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(e) {
			this.getBuildingList(); // 获取建筑物列表
		},
		computed: {
			...mapState({
				jumpParams: modules => modules.infoList.jumpParams
			})
		},
		methods: {
			...mapMutations(['setJumpParams']),
			// 返回上一层页面
			goBack() {
				if (this.jumpParams == 'release') {
					this.setJumpParams(''); // 给页面参数传值
					this.$pageJump.reLaunch(
						'/pages/maintenance/company/home/components/releaseRequirements/releaseRequirementsBuild');
				} else {
					this.$pageJump.reLaunch('/pages/maintenance/company/Company');
				}
			},
			// 上拉加载
			async onReachBottom() {
				this.params.current++;
				await this.getBuildingList(); // 获取的数据列表
			},
			// 下拉刷新
			async onPullDownRefresh() {
				let that = this;
				that.params.current = 1;
				await that.getBuildingList(); // 获取的数据列表
				setTimeout(() => {
					that.$refs.uToast.show({
						title: '刷新成功',
						type: 'success'
					});
					uni.stopPullDownRefresh(); // 停止刷新
				}, 100);
			},
			// 获取建筑物列表
			async getBuildingList() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.post({
					url: '/company/building/page',
					data: this.params
				});
				//console.log('获取建筑物数据列表----', data);
				if (data.code == 200) {
					const infoList = data.data.records;
					if (infoList.length == 0 && this.params.current == 1) {
						// console.log('首次加载没数据');
						this.noData = false;
						this.buildList = [];
					} else if (infoList.length < 7 && this.params.current == 1) {
						// console.log('首次加载有数据，但少于7条');
						this.noData = true;
						this.buildList = infoList;
						this.getRecombinationBuildInfo(this.buildList); // 重组数据
					} else if (infoList.length !== 0 && this.params.current == 1) {
						// console.log('首次加载有数据');
						this.noData = false;
						this.buildList = infoList;
						this.getRecombinationBuildInfo(this.buildList); // 重组数据
					} else if (infoList.length !== 0 && this.params.current > 1) {
						// console.log('上拉加载更多数据');
						this.noData = false;
						this.buildList = this.buildList.concat(infoList);
						this.getRecombinationBuildInfo(this.buildList); // 重组数据
					} else if (infoList.length == 0 && this.params.current > 1) {
						// console.log('上拉加载没有更多数据了');
						this.noData = true;
					}
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
				this.$refs.loading.closeLoading(); // 关闭loading动画
			},
			// 重组建筑的数据
			getRecombinationBuildInfo(data) {
				// 公共建筑 住宅建筑 工业建筑 地铁隧道 地下空间 易燃易爆危险物品场所 其他
				let datBuildList1 = [];
				let datBuildList2 = [];
				let datBuildList3 = [];
				let datBuildList4 = [];
				let datBuildList5 = [];
				let datBuildList6 = [];
				let datBuildList66 = [];
				data.filter(res => {
					if (res.buildingNewTypeTopid == 1) {
						datBuildList1.push(res);
					} else if (res.buildingNewTypeTopid == 2) {
						datBuildList2.push(res);
					} else if (res.buildingNewTypeTopid == 3) {
						datBuildList3.push(res);
					} else if (res.buildingNewTypeTopid == 4) {
						datBuildList4.push(res);
					} else if (res.buildingNewTypeTopid == 5) {
						datBuildList5.push(res);
					} else if (res.buildingNewTypeTopid == 6) {
						datBuildList6.push(res);
					} else if (res.buildingNewTypeTopid == 66) {
						datBuildList66.push(res);
					}
				});
				this.recombinationBuildList = [{
						buildTitle: '公共建筑',
						buildLists: datBuildList1
					},

					{
						buildTitle: '住宅建筑',
						buildLists: datBuildList2
					},
					{
						buildTitle: '工业建筑',
						buildLists: datBuildList3
					},
					{
						buildTitle: '地铁隧道',
						buildLists: datBuildList4
					},
					{
						buildTitle: '地下空间',
						buildLists: datBuildList5
					},
					{
						buildTitle: '易燃易爆危险物品场所',
						buildLists: datBuildList6
					},
					{
						buildTitle: '其他',
						buildLists: datBuildList66
					}
				];
			},
			// 新增建筑物----打开提示弹窗
			addBuilding() {
				this.infoModal = true
			},
			// 新增建筑物----确定操作
			infoConfirm() {
				this.$pageJump.navigateTo('/pages/maintenance/public/personal/building/components/addBuilding');
			},
			// 点击进入编辑页面
			editBuildClick(dat) {
				// console.log('要传的参数--', dat)
				// let {
				// 	buildingName,
				// 	...infos
				// } = dat  + '&buildingName=' + buildingName
				this.$pageJump.navigateTo(
					'/pages/maintenance/public/personal/building/components/addBuilding?items=' + encodeURIComponent(
						JSON.stringify(dat)));
			},
			// 点击进入消防设施页面
			fireFacilitiesClick(e) {
				this.$pageJump.navigateTo(
					'/pages/maintenance/public/personal/building/components/fireFacilities?id=' + e
					.buildingId);
			}
		},
		onShareAppMessage() {
			return {
				title: '分享小程序给朋友',
				path: '/pages/homePage/Home'
			};
		}
	};
</script>

<style lang="scss" scoped>
	.building {
		&-content {
			margin: 24rpx 24rpx 100rpx;
			padding-bottom: 155rpx;

			&-box {
				&-title {
					color: #5c5f65;
					padding-left: 19rpx;
					position: relative;
				}

				&-title::before {
					content: '';
					width: 10rpx;
					height: 10rpx;
					background-color: #3178ff;
					border-radius: 50%;
					position: absolute;
					left: 0;
					top: 31%;
				}

				&-info {
					padding: 40rpx;
				}

				.ff-font-16 {
					width: 400rpx;
				}
			}
		}

		&-but {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
		}
	}

	.ff-ellipsis-1 {
		width: 350rpx;
	}
</style>